<template>
    <div class="loans-control">
        <el-card class="control-card">
            <template #header>
                <div class="card-header">
                    <h2>贷款管理</h2>
                </div>
            </template>

            <!-- 贷款列表 -->
            <el-table :data="loanList" style="width: 100%" v-loading="loading">
                <el-table-column prop="id" label="贷款ID" width="100" />
                <el-table-column prop="userId" label="用户ID" width="100" />
                <el-table-column prop="amount" label="贷款金额" width="120">
                    <template #default="scope">¥{{ scope.row.balance }}</template>
                </el-table-column>
                <el-table-column
                    prop="reason"
                    label="贷款理由"
                    min-width="200"
                    show-overflow-tooltip
                />
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="申请时间" width="180" />
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="scope">
                        <el-button
                            v-if="scope.row.status === 0"
                            type="success"
                            link
                            @click="handleApprove(scope.row)"
                        >
                            批准
                        </el-button>
                        <el-button
                            v-if="scope.row.status === 0"
                            type="danger"
                            link
                            @click="handleReject(scope.row)"
                        >
                            拒绝
                        </el-button>
                        <el-button type="primary" link @click="handleView(scope.row)"
                            >查看</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>

        <!-- 贷款详情对话框 -->
        <el-dialog v-model="dialogVisible" title="贷款详情" width="600px">
            <el-descriptions :column="2" border>
                <el-descriptions-item label="贷款ID">{{ currentLoan.id }}</el-descriptions-item>
                <el-descriptions-item label="用户ID">{{ currentLoan.userId }}</el-descriptions-item>
                <el-descriptions-item label="贷款金额"
                    >¥{{ currentLoan.amount }}</el-descriptions-item
                >
                <el-descriptions-item label="状态">
                    <el-tag :type="getStatusType(currentLoan.status)">
                        {{ getStatusText(currentLoan.status) }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="申请时间">{{
                    currentLoan.createTime
                }}</el-descriptions-item>
                <el-descriptions-item label="贷款理由" :span="2">
                    {{ currentLoan.reason }}
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { listAccountByPage, allLoan, okAccount } from '@/api/account'

// 搜索表单
const searchForm = ref({
    id: '',
    userid: '',
    isok: ''
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 贷款列表
const loanList = ref([])
const loading = ref(false)

// 对话框相关
const dialogVisible = ref(false)
const currentLoan = ref({})

// 获取贷款列表
const fetchLoanList = async () => {
    loading.value = true
    try {
        const res = await allLoan()
        if (res.code === 0) {
            loanList.value = res.data
            total.value = res.data.total
        } else {
            ElMessage.error(res.message || '获取贷款列表失败')
        }
    } catch (error) {
        ElMessage.error(error.message || '获取贷款列表失败')
    } finally {
        loading.value = false
    }
}

// 搜索
const handleSearch = () => {
    currentPage.value = 1
    fetchLoanList()
}

// 重置搜索
const resetSearch = () => {
    searchForm.value = {
        id: '',
        userid: '',
        isok: ''
    }
    handleSearch()
}

// 获取状态类型
const getStatusType = status => {
    switch (status) {
        case 0:
            return 'warning' // 待审核
        case 1:
            return 'success' // 已通过
        case -1:
            return 'danger' // 已拒绝
        default:
            return 'info'
    }
}

// 获取状态文本
const getStatusText = status => {
    switch (status) {
        case 0:
            return '待审核'
        case 1:
            return '已通过'
        case -1:
            return '已拒绝'
        default:
            return '未知状态'
    }
}

// 查看贷款详情
const handleView = row => {
    currentLoan.value = row
    dialogVisible.value = true
}

// 批准贷款
const handleApprove = row => {
    ElMessageBox.confirm('确定要批准该贷款申请吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            const res = await okAccount({
                id: row.id,
            })
            if (res.code === 0) {
                ElMessage.success('已批准贷款申请')
                fetchLoanList()
            } else {
                ElMessage.error(res.message || '操作失败')
            }
        } catch (error) {
            ElMessage.error(error.message || '操作失败')
        }
    })
}

// 拒绝贷款
const handleReject = row => {
    ElMessageBox.confirm('确定要拒绝该贷款申请吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            const res = await okAccount({
                id: row.id,
            })
            if (res.code === 0) {
                ElMessage.success('已拒绝贷款申请')
                fetchLoanList()
            } else {
                ElMessage.error(res.message || '操作失败')
            }
        } catch (error) {
            ElMessage.error(error.message || '操作失败')
        }
    })
}

// 分页相关方法
const handleSizeChange = val => {
    pageSize.value = val
    fetchLoanList()
}

const handleCurrentChange = val => {
    currentPage.value = val
    fetchLoanList()
}

onMounted(() => {
    fetchLoanList()
})
</script>

<style lang="less" scoped>
.loans-control {
    padding: 20px;
}

.control-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
        margin: 0;
        font-size: 20px;
    }
}

.search-form {
    margin-bottom: 20px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

:deep(.el-form-item__label) {
    font-weight: 500;
}
</style>
